<template>
    <payModule :columns="columns" :tableData="tableData" :tableloading="tableloading">
        <template v-slot:imageUrl="{row}">
            <img :src="row.imageUrl" alt="" class="tableImg">
        </template>
        <template v-slot:action="{row}" >
            <el-button type="success" @click="payment(row)">
                <template #icon>
                    <i class="iconfont icon-vip3"></i>
                </template>
            <template #default >
                    点击充值
            </template>
        </el-button>
        </template>
    </payModule>
</template>
<script setup>
import {ref} from 'vue'
import * as api from '@/api/pay.js'
import payModule from '../../../../components/payModule/index.vue'
import {ElMessageBox,ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
let router =useRouter()
let columns = ref([
    {
        label:'产品图片',
        prop:'imageUrl',
        // width:'100px'
    },
    {
        label:'产品名称',
        prop:'productName'
    },
    {
        label:'产品描述',
        prop:'description'
    },
    {
        label:'产品价格',
        prop:'price'
    },
    {
        label:'库存',
        prop:'inventory'
    },
    {
        label:'充值',
        prop:'action'
    }
])
let tableData = ref([])
let tableloading = ref(false)
//获取产品
let getList =async ()=>{
    tableloading.value = true
    try{
        let res =await api.getCategoryApi()
        tableData.value = res.data.data
        tableloading.value =false
    }catch(e){
        tableloading.value = false
        console.log(e);
    }
}
getList()
let payment = (row)=>{

    ElMessageBox.confirm('您正在购买'+row.productName+'是否确认?'+row.description, '购买提示', {
        confirmButtonText: "确定",
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            router.push({path:('/pay/payMent'),query:{product_id:row.product_id}})
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消'
            })
        })

}



</script>
<script>
export default{
    meta:{
        title: 'vipCharge',
        name: 'vip充值',
        iconfont:'#icon-chongzhi'
        
    }
}
//点击充值按钮触发事件

</script>
<style scoped>
    .tableImg{
        width: 40%;
    }

</style>